<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var arrImg=new Array("Images/Flint01.jpg","Images/Flint02,jpg","Images/Flint03.jpg","Images/Flint04.jpg");
        $(function(){
            jQuery.fn.beforeload=function(opions){
                options= $.extend({
                    src:""
                },options);
                var self=this;
                self.hide();
                var img=new Image();
                $(img).load(function(){
                    self.attr("src",options.src);
                    self.fadeIn("slow");
                }).attr("src",options.src);
                return _self;
            };
            var $imgShow=$("#imgShow");
            var i=0;
            var max=arrImg.length-1;
            $(".imgn1").bind("click",function(){
                i++;
                if(i>max){
                    i=0;
                }
                loadPic(i);
                return false;
            });
            $(".imgp1").bind("click",function(){
                i--;
                if(i<0){
                    i=max;
                }
                loadPic(i);
                return false;
            });
            loadPic(0);
            function loadPic(i){
                $imgShow.beforeload({"src":arrImg[i]});
                $(".tip").html("第"+parseInt(i+1)+"张");
            }
        });
    </script>
    <title>imgBeforeLoad</title>
</head>
<body>
<div class="box">
    <div class="imgp1"></div>
    <div class="imgbg">
        <img id="imgShow"/>
    </div>
    <div class="imgn1">
    </div>
    <p class="tip"></p>
</div>
</body>
</html>